import React from 'react';
import "./App.css";

class App extends React.Component{
    flag = 0
    state = {
        value:"",
        list:[]
    }
    submit = () => {
        if(this.state.value !== "") {
            this.setState({
                list:[...this.state.list,
                    {
                        value:this.state.value,
                        id:this.flag,
                        isCompleted:false
                    }
                ],
                value:""
            });
            this.flag += 1;
        }
    }
    handleChange = (e) => {
        this.setState({
            value: e.target.value
        });
    }
    delete = (id) => {
        this.setState({
            list:this.state.list.filter(item => id !== item.id)
        });
    }
    changeCompleted = (id) => {
        this.setState({
            list: this.state.list.map(item => {
                    if(id === item.id) {
                        return {
                            value:item.value,
                            id:item.id,
                            isCompleted:!item.isCompleted
                        }
                    }else {
                        return {
                            value:item.value,
                            id:item.id,
                            isCompleted:item.isCompleted
                        }
                    }
                }
            )
        });
    }
    render() {
        return <div className="content">
            <h1>Todo List</h1>
            <div className="submit">
                <input type="text" value={this.state.value} onChange={this.handleChange} />
                <button onClick={this.submit}>提交</button>
            </div>
            <div className="list">
                <ul className="list-style">
                    {
                        this.state.list.map(item => {
                            return <li key={item.id} className="li-style">
                                        {
                                            item.isCompleted
                                            ?<div className="completed">
                                                <svg onClick={() =>this.changeCompleted(item.id)} t="1664784888152" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3653" width="200" height="200"><path d="M892.064 261.888a31.936 31.936 0 0 0-45.216 1.472L421.664 717.248l-220.448-185.216a32 32 0 1 0-41.152 48.992l243.648 204.704a31.872 31.872 0 0 0 20.576 7.488 31.808 31.808 0 0 0 23.36-10.112L893.536 307.136a32 32 0 0 0-1.472-45.248z" p-id="3654" fill="#ffffff"></path></svg>
                                                <p>{item.value}</p>
                                                <svg onClick={() => this.delete(item.id)} t="1664786120509" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4717" width="200" height="200"><path d="M842.947458 778.116917 576.847937 512.013303 842.946434 245.883083c8.67559-8.674567 13.447267-20.208251 13.43908-32.477692-0.008186-12.232602-4.7727-23.715121-13.414521-32.332383-8.655124-8.677637-20.149922-13.450337-32.384571-13.4575-12.286838 0-23.808242 4.771677-32.474622 13.434987L512.019443 447.143876 245.88206 181.050496c-8.66331-8.66331-20.175505-13.434987-32.416294-13.434987-12.239765 0-23.75196 4.770653-32.414247 13.43294-8.66024 8.636704-13.428847 20.12434-13.437034 32.356942-0.008186 12.269441 4.76349 23.803125 13.437034 32.476669l266.135336 266.13022L181.050496 778.11794c-8.664334 8.66331-13.43601 20.173458-13.43601 32.41527 0 12.239765 4.7727 23.752983 13.437034 32.417317 8.662287 8.66331 20.173458 13.43294 32.413224 13.43294 12.240789 0 23.754007-4.770653 32.416294-13.43294l266.134313-266.100544 266.101567 266.100544c8.66331 8.66331 20.185738 13.43294 32.4429 13.43294 12.265348-0.008186 23.74889-4.771677 32.369222-13.412474C860.81643 825.081555 860.821547 795.991006 842.947458 778.116917z" p-id="4718" fill="#ffffff"></path></svg>
                                            </div>
                                            :<div className="uncompleted">
                                                <svg onClick={() =>this.changeCompleted(item.id)} t="1664784811363" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2381" width="200" height="200"><path d="M768 128H256c-70.4 0-128 57.6-128 128v512c0 70.4 57.6 128 128 128h512c70.4 0 128-57.6 128-128V256c0-70.4-57.6-128-128-128z m64 640c0 35.2-28.8 64-64 64H256c-35.2 0-64-28.8-64-64V256c0-35.2 28.8-64 64-64h512c35.2 0 64 28.8 64 64v512z" p-id="2382"></path></svg>
                                                <p>{item.value}</p>
                                                <svg onClick={() => this.delete(item.id)} t="1664786120509" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4717" width="200" height="200"><path d="M842.947458 778.116917 576.847937 512.013303 842.946434 245.883083c8.67559-8.674567 13.447267-20.208251 13.43908-32.477692-0.008186-12.232602-4.7727-23.715121-13.414521-32.332383-8.655124-8.677637-20.149922-13.450337-32.384571-13.4575-12.286838 0-23.808242 4.771677-32.474622 13.434987L512.019443 447.143876 245.88206 181.050496c-8.66331-8.66331-20.175505-13.434987-32.416294-13.434987-12.239765 0-23.75196 4.770653-32.414247 13.43294-8.66024 8.636704-13.428847 20.12434-13.437034 32.356942-0.008186 12.269441 4.76349 23.803125 13.437034 32.476669l266.135336 266.13022L181.050496 778.11794c-8.664334 8.66331-13.43601 20.173458-13.43601 32.41527 0 12.239765 4.7727 23.752983 13.437034 32.417317 8.662287 8.66331 20.173458 13.43294 32.413224 13.43294 12.240789 0 23.754007-4.770653 32.416294-13.43294l266.134313-266.100544 266.101567 266.100544c8.66331 8.66331 20.185738 13.43294 32.4429 13.43294 12.265348-0.008186 23.74889-4.771677 32.369222-13.412474C860.81643 825.081555 860.821547 795.991006 842.947458 778.116917z" p-id="4718"></path></svg>
                                            </div>
                                        }
                                    </li>
                            }
                        )
                    }
                </ul>
            </div>
        </div>
    }
}

export default App;